{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a701b0a870d9147847d307da4e218607b0b1ae3","tarball":"https://registry.npmjs.org/@material/list/-/list-0.39.0-0.tgz","fileCount":13,"integrity":"sha512-Q+kZcqOpVMHc1PvMDDCT3Sa7Bd90HnkZGuYynueqEjG1u55XKcR4AaXA+xk9lEum/yxzoRHDGnuyMnbIVnIibA==","signatures":[{"sig":"MEUCIQC08qDC+NrfPG+lK5CQBBuUtQqZu7wvw+VF0xNKNeeUOgIgNG/2WwO/WBygITKSG8TFBA7o9AzPtBUIXciahNZasz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZVLCRA9TVsSAnZWagAAVkgP/0SK83Kv9E7B8KeUW2zt\nsqflbK6HRBpdsPTjTKCiyTGhIixxIJcHVu0C3/rUigVq+O56WyUhz50VdV9C\nmM2/xZ8Evirqvvc0vPYNkNUt/TF5+n7cN/nrJgQxc71zt4H8UnGSobhJ8QUr\nm1LYrdvxqIb5ZCxpnnRtOq+CxQWcdQK2sFprPkJ9IIQ4Fzh2m74U9DrVZmTA\nHz6eOkfK0vMLXFbFbRu3MWMjjGZDV6tpWqwJNuM5QZwiyQ2opXp6gi4a0kgb\nC1UlFRFX0EgIcsCJW8KOPxoVd8d4fb725l9ih633HG4616ulOOSv89XKdUEe\nasQSMPjNr4zOX9q52Rv6jkSvu5jMNlfNpPFDCO0whukU/IfiPYpj2ZTV3b37\npsE0yVxSqxaseCF31iE/vQ8c8GugSJt+8ZFAZ/W+5qQthz2uf055n3Ziajm9\nBSG9PCvED6DMhAngXrKOTh0yTceSwoWrbKt6u4gdDRDYy8aWRBweVzkMCg8Y\nKH1ahB7TwCQcYC+pzRE/N8p+aZ6VDdT9BcMts82fl362Au5wr3tInOYpAbRY\n38rulBDRiLaBdV1FWJEv4S1G7k8O4TKAJVSvgK5F8iZ59FP1O1w9ic8EzWH6\nWw0gHQAKBOSK4DrmfgxwdqlAiHLJ2n4/wHIk/MDHQIiqUQ2jNLSUSKjd0Xiv\nBwoh\r\n=t591\r\n-----END PGP SIGNATURE-----\r\n"},"name":"@material/list","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## 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\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 or deselected. \n\n```html\n\n```\n\n```js\nvar listEle = document.getElementById('my-list');\nvar list = new mdc.list.MDCList(listEle);\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` class and `aria-selected=\"true\"` attribute before creating the list.\n\n```html\n\n```\n\n```js\nvar listEle = document.getElementById('my-list');\nvar list = new mdc.list.MDCList(listEle);\nlist.singleSelection = true;\n```\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` |\tOptional, wrapper for two line 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--selected` | Optional, styles the row in an selected* state.\n`mdc-list-item--activated` | Optional, styles the row in an 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: `mdc-list-divider` class can be used between list items (example 1) *OR* between two lists (example 2).\n\n> NOTE: the difference between selected and activated states:\n\n* *Selected* state should be implemented on the `.mdc-list-item` when it is likely to change soon. Eg., selecting one or more photos to share in Google Photos.\n* Multiple items can be selected at the same time when using the *selected* state.\n* *Activated* state is similar to selected state, however should only be implemented once within a specific list.\n* *Activated* state is more permanent than selected state, and will **NOT** change soon relative to the lifetime of the page.\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-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. You should not add `tabindex` to any of the `li` elements in a list.\n\nAs the user navigates through the list, any `button` or `a` elements within the list will receive `tabindex=\"-1\"`\nwhen the list item is not focused. When the list item receives focus, the child `button` and `a` elements will \nreceive `tabIndex=\"0\"`. This allows for the user to tab through list item elements and then tab to the\nfirst element after the list. The `Arrow`, `Home`, and `End` keys should be used for navigating internal list elements.\nIf `singleSelection=true`, the list will allow the user to use the `Space` or `Enter` keys to select or deselect\na list item. The MDCList will perform the following actions for each key press\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## 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` or `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 `aria-selected` attribute, the `mdc-list-item--selected` class should be added, and the `tabindex` of the selected\nelement should be `0`. The first list item should have the `tabindex` updated to `-1`. The foundation method \n`setSelectedIndex()` should be called with the initially selected element immediately after the foundation is \ninstantiated.\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`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`isElementFocusable(ele: Element) => boolean` | Returns true if `ele` contains a focusable child element.\n`setTabIndexForListItemChildren(index: Number, value: Number) => void` | Sets the `tabindex` attribute to `value` for each child `button` and `a` element in the list item at the `index` specified.\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`setSelectedIndex(index: Number) => void` | Toggles the `selected` state of the list item at index `index`. \n`handleFocusIn(evt: Event) => void` | Handles the changing of `tabindex` to `0` for all `button` and `a` elements when a list item receives focus. \n`handleFocusOut(evt: Event) => void` | Handles the changing of `tabindex` to `-1` for all `button` and `a` 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) => void` | Handles focusing the next element using the current `index`.\n`focusPrevElement(index: Number) => void` | Handles focusing the previous element using the current `index`.\n`focusFirstElement() => void` | Handles focusing the first element in a list.\n`focusLastElement() => void` | Handles focusing the last element in a list.\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","list"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","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"}],"_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/typography":"^0.39.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/list_0.39.0-0_1534432576012_0.23543792636208227","host":"s3://npm-registry-packages"},"_id":"@material/list@0.39.0-0","version":"0.39.0-0"}