{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"926d941ec3bf4b0a4d585e5c588508838acdeeb8","tarball":"https://registry.npmjs.org/@material/list/-/list-3.1.0-alpha.0.tgz","fileCount":33,"integrity":"sha512-punniNwQDwrtLizwUEcZ0xbhcOH4jXj42NwbbHSfkhl9n8GEt8Eaj+CGSHMv6toxw3PQdW0idV+6vSfKiGHH7w==","signatures":[{"sig":"MEUCIHwXiqPmJBLaHS8LaW6VDPC4pIesNW/t+RNnCWewagzcAiEAwqpeV91dWl3FfwUQ6oFubaozg5lFcVHPrPFUbnJflJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEvCRA9TVsSAnZWagAA9t8P/3Yf0oTcD7r314ioB0FK\nGdJZFWX/qzlrGQtedPvPI2YpIsicnUppOfknd+Q/+oy6mAiyMEg7x7Rz+5v9\nEId6cR5hWhusBc0cJn69cHyzSTrVSQE8yNutiJ9wjbTXKgj/6/oOLc21Ff3N\ndRKqxF8PECX+IDvlKL0fQICtgX2/VXctwEAytsX8ryw/O0RWLWZu+JuvCsMp\nzVDrTn40IQw83KF81iaYV/l7BYyy7t+p9rNg70fWi9Cdl7C/PRxBSwLDyKwr\n7622bFfQWkZUCaHfXOl+tnUIpHWZzfpwaj6h7+++43ATmp23Dsu2TfhnlAVd\n33t2JOygOZoviYfnRCv61AkFs4bwqsOdnmUhYPC9UpHvWKI7pWkdrGZSVHCE\np63kLsIQZowXhtT/4TmRSuJ1Pywo+Sz9eTyfnu5o/XSx3Cw+x/PBG4dhcXDx\nkVsKhILZmX0m3RU9MaqsZoFSaaKUF/qgzVdL8sh8FNfba0TjsSRdQ4nGNacE\nZpKqqlLObtBUoVLGcHqjYpe06KWvyK3CZpr5RJMxWFizrW16bBX4fgGiQ1Hy\nl18LccfZ3m1L+XALZOqGO1Ciok3IBv5e6kJCl1YtMiX47ufkZS/xPzaNtupE\nIDJmSPvAOkYus1ufsuJmxEFZsBPTJ9SBZ1LfgTdQ7p4qcdJ2lGIz9Kp5npNs\nQk5l\r\n=5qzQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.list.js","name":"@material/list","types":"dist/mdc.list.d.ts","module":"index.js","readme":"\n\n# Lists\n\n\n\nLists are continuous, vertical indexes of text or images.\n\n## Design & API Documentation\n\n\n\n## Installation\n```\nnpm install @material/list\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n\n```\n\n### Styles\n\n```scss\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript\n\nMDC List includes an optional JavaScript component which can be used for keyboard interaction and accessibility.\n\n```js\nimport {MDCList} from '@material/list';\n\nconst list = new MDCList(document.querySelector('.mdc-list'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\nNote that the JS component does _not_ automatically instantiate ripples on list items. If you wish to include the\nfully-upgraded ripple effect on list items, you must instantiate `MDCRipple` on each item:\n\n```js\nimport {MDCRipple} from '@material/ripple';\n\nconst listItemRipples = list.listElements.map((listItemEl) => new MDCRipple(listItemEl));\n```\n\n## Variants\n\n### Two-Line List\n\nYou can use the `mdc-list--two-line` combined with some extra markup around the text to style a list\nin the double line list style as defined by\n[the spec](https://material.io/design/components/lists.html#specs) (see \"Double line\").\n\n```html\n\n```\n\n> NOTE: Make sure there are no white-space characters before primary and secondary text content.\n\n### List Groups\n\nMultiple related lists can be grouped together using the `mdc-list-group` class on a containing element.\n\n```html\n
\n

List 1

\n \n

List 2

\n \n
\n```\n\n### List Dividers\n\nMDC List contains an `mdc-list-divider` class which can be used as full-width or inset subdivisions either within lists themselves, or standalone between related groups of content.\n\n```html\n\n```\n\n> NOTE: the role=\"separator\" attribute on the list divider. It is important to include this so that assistive technology can be made aware that this is a presentational element and is not meant to be included as an item in a list. Note that separator is indeed a valid role for li elements.\n\nOR\n\n```html\n\n
\n\n```\n\n### Single Selection List\n\nMDC List can handle selecting/deselecting list elements based on click or keyboard action. When enabled, the `space` and `enter` keys (or `click` event) will trigger an\nsingle list item to become selected and any other previous selected element to become deselected.\n\n```html\n\n```\n\n```js\nconst list = new MDCList(document.getElementById('my-list'));\nlist.singleSelection = true;\n```\n\n#### Pre-selected list item\n\nWhen rendering the list with a pre-selected list item, the list item that needs to be selected should contain\nthe `mdc-list-item--selected` or `mdc-list-item--activated` class before creating the list. Please see\n[Accessibility](#Accessibility) section for appropriate aria attributes.\n\n```html\n\n```\n\n```js\nconst list = new MDCList(document.getElementById('my-list'));\nlist.singleSelection = true;\n```\n\n### List with radio group\n\nWhen rendering list radio group with pre-selected radio button the selected list item should contain `aria-checked` set to `true` and the native radio input element contains `checked` attribute, all other list items should have `aria-checked` set to `false`. The list root contains `role=\"radiogroup\"` whereas each list item within radio group contains `role=\"radio\"`.\n\n```html\n\n```\n\n### List with checkbox items\n\nWhen rendering list with checkbox items all pre-selected list items should contain `aria-checked` set to `true` and the native checkbox input element should contain `checked` attribute, all other list items should have `aria-checked` set to `false`. Each list item in checkbox list contains `role=\"checkbox\"` attribute and the list root should contain `role=\"group\"` and `aria-label` attributes.\n\n```html\n\n```\n\nThe `selectedIndex` (that proxies foundation's `setSelectedState()`) accepts list of indexes in array format for list with checkbox items to set the selection state. It overwrites the current state with new selected state.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-list` | Mandatory, for the list element.\n`mdc-list--non-interactive` | Optional, disables interactivity affordances.\n`mdc-list--dense` | Optional, styles the density of the list, making it appear more compact.\n`mdc-list--avatar-list` | Optional, configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger.\n`mdc-list--two-line` | Optional, modifier to style list with two lines (primary and secondary lines).\n`mdc-list-item` | Mandatory, for the list item element.\n`mdc-list-item__text` |\tMandatory. Wrapper for list item text content (displayed as middle column of the list item).\n`mdc-list-item__primary-text` | Optional, primary text for the list item. Should be the child of `mdc-list-item__text`.\n`mdc-list-item__secondary-text` | Optional, secondary text for the list item. Displayed below the primary text. Should be the child of `mdc-list-item__text`.\n`mdc-list-item--disabled` | Optional, styles the row in the disabled state.\n`mdc-list-item--selected` | Optional, styles the row in the selected* state.\n`mdc-list-item--activated` | Optional, styles the row in the activated* state.\n`mdc-list-item__graphic` | Optional, the first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image.\n`mdc-list-item__meta`\t| Optional, the last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image.\n`mdc-list-group` | Optional, wrapper around two or more mdc-list elements to be grouped together.\n`mdc-list-group__subheader` |\tOptional, heading text displayed above each list in a group.\n`mdc-list-divider` | Optional, for list divider element.\n`mdc-list-divider--padded` | Optional, leaves gaps on each side of divider to match padding of `list-item__meta`.\n`mdc-list-divider--inset` | Optional, increases the leading margin of the divider so that it does not intersect the avatar column.\n\n> NOTE: The `mdc-list-divider` class can be used between list items *OR* between two lists (see respective examples under [List Dividers](#list-dividers)).\n\n> NOTE: In Material Design, the selected and activated states apply in different, mutually-exclusive situations:\n> * *Selected* state should be applied on the `.mdc-list-item` when it is likely to frequently change due to user choice. E.g., selecting one or more photos to share in Google Photos.\n> * *Activated* state is more permanent than selected state, and will **NOT** change soon relative to the lifetime of the page. Common examples are navigation components such as the list within a navigation drawer.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-list-item-primary-text-ink-color($color)` | Sets the ink color of the primary text of the list item.\n`mdc-list-item-secondary-text-ink-color($color)` | Sets the ink color of the secondary text of the list item.\n`mdc-list-item-graphic-fill-color($color)` | Sets background ink color of the graphic element within list item.\n`mdc-list-item-graphic-ink-color($color)` | Sets ink color of the graphic element within list item.\n`mdc-list-item-meta-ink-color($color)` | Sets ink color of the meta element within list item.\n`mdc-list-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to list item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`mdc-list-divider-color($color)` | Sets divider ink color.\n`mdc-list-group-subheader-ink-color($color)` | Sets ink color of subheader text within list group.\n\n### Accessibility\n\nThe MDCList JavaScript component implements the WAI-ARIA best practices for\n[Listbox](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox). This includes overriding the default tab behavior\nwithin the list component.\n\nThe `tabindex` should be set to `0` for first list item element or selected list item element, remaining list item elements should not have `tabindex` set.\n\nUse `role=\"listbox\"` only for single selection list, without this role the `ul` element is implicitely `role=\"list\"`.\nDo not use `aria-orientation` attribute for standard list (i.e., `role=\"list\"`), use component's `vertical` property to set the orientation\nto vertical.\n\nSingle selection list supports `aria-selected` and `aria-current` attributes. List automatically detects the presence of these attributes\nand sets it to next selected list item based on which ARIA attribute you use (i.e., `aria-selected` or `aria-current`). Please see WAI-ARIA [aria-current](https://www.w3.org/TR/wai-aria-1.1/#aria-current) article for recommended usage and available attribute values.\n\nAs the user navigates through the list, any `button` and `a` elements within the list will receive `tabindex=\"-1\"` when\nthe list item is not focused. When the list item receives focus, the aforementioned elements will receive\n`tabIndex=\"0\"`. This allows for the user to tab through list item elements and then tab to the first element after the\nlist. The `Arrow`, `Home`, and `End` keys should be used for navigating internal list elements. If\n`singleSelection=true`, the list will allow the user to use the `Space` or `Enter` keys to select or deselect a list\nitem. The MDCList will perform the following actions for each key press. Since list interaction will toggle a radio\nbutton or checkbox within the list item, the list will not toggle `tabindex` for those elements.\n\nDisabled list item will be included in the keyboard navigation. Please see [Focusability of disabled controls](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls) section in ARIA practices article.\n\nKey | Action\n--- | ---\n`ArrowUp` | When the list is in a vertical orientation, it will cause the previous list item to receive focus.\n`ArrowDown` | When the list is in a vertical orientation, it will cause the next list item to receive focus.\n`ArrowLeft` | When the list is in a horizontal orientation (default), it will cause the previous list item to receive focus.\n`ArrowRight` | When the list is in a horizontal orientation (default), it will cause the next list item to receive focus.\n`Home` | Will cause the first list item in the list to receive focus.\n`End` | Will cause the last list item in the list to receive focus.\n`Space` | Will cause the currently focused list item to become selected/deselected if `singleSelection=true`.\n`Enter` | Will cause the currently focused list item to become selected/deselected if `singleSelection=true`.\n\n\n## `MDCList` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`vertical` | `boolean` (write-only) | Proxies to the foundation's `setVerticalOrientation()` method.\n`listElements` | `Array` (read-only) | Returns all list item elements including disabled list items.\n`wrapFocus` | `boolean` (write-only) | Proxies to the foundation's `setWrapFocus()` method.\n`singleSelection` | `boolean` (write-only) | Proxies to the foundation's `setSingleSelection()` method.\n`selectedIndex` | `boolean` | Proxies to the foundation's `getSelectedIndex()` and `setSelectedIndex()` methods.\n\nMethod Signature | Description\n--- | ---\n`layout() => void` | Recalculates layout and orientation.\n`initializeListType() => void` | Initialize `selectedIndex` value based on pre-selected checkbox list items, single selection or radio.\n\n### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCList:action` | `{index: number}` | Indicates that a list item with the specified index has been activated.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a List 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### Considerations for Advanced Approach\n\nThe `MDCListFoundation` expects the HTML to be setup a certain way before being used. This setup is a part of the `layout()` and `singleSelection()` functions within the `index.js`.\n\n#### Setup in `layout()`\n\nThe default component requires that every list item receives a `tabindex` value so that it can receive focus\n(`li` elements cannot receive focus at all without a `tabindex` value). Any element not already containing a\n`tabindex` attribute will receive `tabindex=-1`. The first list item should have `tabindex=\"0\"` so that the\nuser can find the first element using the `tab` key, but subsequent `tab` keys strokes will cause focus to\nskip over the entire list. If the list items contain sub-elements that are focusable (`button` and `a` elements),\nthese should also receive `tabIndex=\"-1\"`.\n\n```html\n\n```\n\n#### Setup in `singleSelection()`\n\nWhen implementing a component that will use the single selection variant, the HTML should be modified to include\nthe `mdc-list-item--selected` or `mdc-list-item--activated` class name,\nand the `tabindex` of the selected element should be `0`. The first list item should have the `tabindex` updated\nto `-1`. The foundation method `setSelectedIndex()` should be called with the initially selected element immediately\nafter the foundation is instantiated. Please see [Accessibility](#Accessibility) section for appropriate aria attributes.\n\n```html\n\n```\n\n### `MDCListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getListItemCount() => Number` | Returns the total number of list items (elements with `mdc-list-item` class) that are direct children of the `root_` element.\n`getFocusedElementIndex() => Number` | Returns the `index` value of the currently focused element.\n`getListItemIndex(ele: Element) => Number` | Returns the `index` value of the provided `ele` element.\n`getAttributeForElementIndex(index: number, attribute: string) => string | null` | Returns the attribute value of list item at given `index`.\n`setAttributeForElementIndex(index: Number, attr: String, value: String) => void` | Sets the `attr` attribute to `value` for the list item at `index`.\n`addClassForElementIndex(index: Number, className: String) => void` | Adds the `className` class to the list item at `index`.\n`removeClassForElementIndex(index: Number, className: String) => void` | Removes the `className` class to the list item at `index`.\n`focusItemAtIndex(index: Number) => void` | Focuses the list item at the `index` value specified.\n`setTabIndexForListItemChildren(index: Number, value: Number) => void` | Sets the `tabindex` attribute to `value` for each child button or anchor element in the list item at the `index` specified.\n`hasRadioAtIndex(index: number) => boolean` | Returns true if radio button is present at given list item index.\n`hasCheckboxAtIndex(index: number) => boolean` | Returns true if checkbox is present at given list item index.\n`isCheckboxCheckedAtIndex(index: number) => boolean` | Returns true if checkbox inside a list item is checked.\n`setCheckedCheckboxOrRadioAtIndex(index: number, isChecked: boolean) => void` | Sets the checked status of checkbox or radio at given list item index.\n`notifyAction(index: number) => void` | Notifies user action on list item including keyboard and mouse actions.\n`isFocusInsideList() => boolean` | Returns true if the current focused element is inside list root.\n`isRootFocused() => boolean` | Returns true if root element is focused.\n\n### `MDCListFoundation`\n\nMethod Signature | Description\n--- | ---\n`setWrapFocus(value: Boolean) => void` | Sets the list to allow the up arrow on the first element to focus the last element of the list and vice versa.\n`setVerticalOrientation(value: Boolean) => void` | Sets the list to an orientation causing the keys used for navigation to change. `true` results in the Up/Down arrow keys being used. `false` results in the Left/Right arrow keys being used.\n`setSingleSelection(value: Boolean) => void` | Sets the list to be a selection list. Enables the `enter` and `space` keys for selecting/deselecting a list item.\n`getSelectedIndex() => MDCListIndex` | Gets the current selection state by returning selected index or list of indexes for checkbox based list. See [types.ts](./types.ts) for `MDCListIndex` type definition.\n`setSelectedIndex(index: MDCListIndex) => void` | Sets the selection state to given index or list of indexes if it is checkbox based list. See [types.ts](./types.ts) for `MDCListIndex` type definition.\n`setUseActivatedClass(useActivated: boolean) => void` | Sets the selection logic to apply/remove the `mdc-list-item--activated` class.\n`handleFocusIn(evt: Event) => void` | Handles the changing of `tabindex` to `0` for all button and anchor elements when a list item receives focus.\n`handleFocusOut(evt: Event) => void` | Handles the changing of `tabindex` to `-1` for all button and anchor elements when a list item loses focus.\n`handleKeydown(evt: Event) => void` | Handles determining if a focus action should occur when a key event is triggered.\n`handleClick(evt: Event) => void` | Handles toggling the selected/deselected state for a list item when clicked. This method is only used by the single selection list.\n`focusNextElement(index: number) => number` | Handles focusing the next element using the current `index`. Returns focused element index.\n`focusPrevElement(index: number) => number` | Handles focusing the previous element using the current `index`. Returns focused element index.\n`focusFirstElement() => number` | Handles focusing the first element in a list. Returns focused element index.\n`focusLastElement() => number` | Handles focusing the last element in a list. Returns focused element index.\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","list"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web list 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":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/shape":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/ripple":"^3.1.0-alpha.0","@material/typography":"^3.0.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/list_3.1.0-alpha.0_1563283759391_0.5591595643599983","host":"s3://npm-registry-packages"},"_id":"@material/list@3.1.0-alpha.0","version":"3.1.0-alpha.0"}