{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff097c7066ae8c3784c5683d10269b69a5e628dc","tarball":"https://registry.npmjs.org/@material/chips/-/chips-0.35.0.tgz","fileCount":20,"integrity":"sha512-Tpeu8e8XVeU+EJIxvd0v/98NJo37ZlwQxKCK+WBSI0qu8SG8tI82GFLcB3d4bm/M6yG4O+06GJ9y89QAv48O7A==","signatures":[{"sig":"MEUCIQDvZioFrPtKDjGUbBBBj/yynHXl6a+aFy0cXdKhBIquCgIgexObc561/jCrp6Z9iq7MJdI4G9mLxlsn14YTHe1x/U8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":224503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDICRA9TVsSAnZWagAAOMIP/jPH+2J+IYdFRuK7MUJE\nI6RTbQcCNbTd77jNHtFtfuXGxMgqdDRO0dXaoX2cbLQF2bsw3eq/8eDXtiKS\n+nlJfAjIsCGVCN3KGHxmrH6Foi2cu42fvdPEAQAhXAhDrzF6rnVi68d7bHG8\n8Y2sRLGteQ0kere1fIpHzM+v3CsdYEzvzkGPymWYrhku9/Ivm7r4o6MdSByO\naQRS+ZRr0l+gUKl6fQNuDvkk6/CYhdoU38g8X5vEGgj+IYnugzz7Rf6MyCWC\n7Cx3PNs6Y1A/NGId+9dl/onXZ660y+t1JpnjCt/hbhb/WraYxFcEFPzmszX4\niB7eLfwamWjvwqvI41FdkDpwcxqIwobrF4souIxwVw/5ekyfXqWFp4KF16xX\nHaDhbTJbctxbY+IrRRnZribIWJbgETRQPtFTXbrUIFlGSHttaCdYRTWQts2q\nSpPc+osVb5bZQ9IjHoUS+gke6BI5rhhHSLg6m2Je1n/ZWh4xihswNaTYVma5\nWq2LcAep5/6NlTmRZXmwJdJFYgRncKcPW6BlJxxejZ9WEGECaTT9sXgKEaYg\nHbJY7XVcqThOMTZYD8CZ0pSII7iMkv/pSGkOII86KvI6tUpVOwEut4yjOFs+\nDbSPuJY8wKmewdrahZ9iGyY+JWEqyhAEe6FenJbw0Pj4CA2wap8xjIE75PDy\nyFzW\r\n=kUav\r\n-----END PGP SIGNATURE-----\r\n"},"name":"@material/chips","readme":"<!--docs:\ntitle: \"Chips\"\nlayout: detail\nsection: components\nexcerpt: \"Chips are compact elements that represent an attribute, text, entity, or action.\"\niconId: chip\npath: /catalog/chips/\n-->\n\n# Chips\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components-web.appspot.com/chips.html\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/chips.png\" width=\"363\" alt=\"Chips screenshot\">\n  </a>\n</div>-->\n\nChips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/chips.html\">Material Design guidelines: Chips</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components-web.appspot.com/chips.html\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n```\nnpm install @material/chips\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-chip-set\">\n  <div class=\"mdc-chip\" tabindex=\"0\">\n    <div class=\"mdc-chip__text\">Chip content</div>\n  </div>\n  <div class=\"mdc-chip\" tabindex=\"0\">\n    <div class=\"mdc-chip__text\">Chip content</div>\n  </div>\n  <div class=\"mdc-chip\" tabindex=\"0\">\n    <div class=\"mdc-chip__text\">Chip content</div>\n  </div>\n</div>\n```\n\n#### Leading and Trailing Icons\n\nYou can optionally add a leading icon (i.e. thumbnail) and/or a trailing icon to a chip. To add an icon, add an `i` element with your preferred icon, give it a class of `mdc-chip__icon`, and a class of either `mdc-chip__icon--leading` or `mdc-chip__icon--trailing`. If you're adding a trailing icon, also set `tabindex=\"0\"` and `role=\"button\"` to make it accessible by keyboard and screenreader.\n\n##### Leading icon\n\n```html\n<div class=\"mdc-chip\">\n  <i class=\"material-icons mdc-chip__icon mdc-chip__icon--leading\">event</i>\n  <div class=\"mdc-chip__text\">Add to calendar</div>\n</div>\n```\n\n##### Trailing icon\n\n```html\n<div class=\"mdc-chip\">\n  <div class=\"mdc-chip__text\">Jane Smith</div>\n  <i class=\"material-icons mdc-chip__icon mdc-chip__icon--trailing\" tabindex=\"0\" role=\"button\">cancel</i>\n</div>\n```\n\n#### Filter Chips\n\nFilter chips are a variant of chips which allow multiple selection from a set of options. When a filter chip is selected, a checkmark appears as the leading icon. If the chip already has a leading icon, the checkmark replaces it. This requires the HTML structure of a filter chip to differ from other chips:\n\n```html\n<div class=\"mdc-chip\">\n  <div class=\"mdc-chip__checkmark\" >\n    <svg class=\"mdc-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\">\n      <path class=\"mdc-chip__checkmark-path\" fill=\"none\" stroke=\"black\"\n            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n    </svg>\n  </div>\n  <div class=\"mdc-chip__text\">Filterable content</div>\n</div>\n```\n\nTo use a leading icon in a filter chip, put the `mdc-chip__icon--leading` element _before_ the `mdc-chip__checkmark` element:\n\n```html\n<div class=\"mdc-chip\">\n  <i class=\"material-icons mdc-chip__icon mdc-chip__icon--leading\">face</i>\n  <div class=\"mdc-chip__checkmark\" >\n    <svg class=\"mdc-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\">\n      <path class=\"mdc-chip__checkmark-path\" fill=\"none\" stroke=\"black\"\n            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n    </svg>\n  </div>\n  <div class=\"mdc-chip__text\">Filterable content</div>\n</div>\n```\n\n#### Pre-selected\n\nTo display a pre-selected chip, add the class `mdc-chip--selected` to the root chip element.\n\n```html\n<div class=\"mdc-chip mdc-chip--selected\">\n  <div class=\"mdc-chip__text\">Add to calendar</div>\n</div>\n```\n\nTo pre-select filter chips that have a leading icon, also add the class `mdc-chip__icon--leading-hidden` to the `mdc-chip__icon--leading` element. This will ensure that the checkmark displaces the leading icon.\n\n```html\n<div class=\"mdc-chip mdc-chip--selected\">\n  <i class=\"material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden\">face</i>\n  <div class=\"mdc-chip__checkmark\">\n    <svg class=\"mdc-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\">\n      <path class=\"mdc-chip__checkmark-path\" fill=\"none\" stroke=\"black\"\n            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n    </svg>\n  </div>\n  <div class=\"mdc-chip__text\">Filterable content</div>\n</div>\n```\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-chip-set` | Mandatory. Indicates the set that the chip belongs to.\n`mdc-chip-set--input` | Optional. Indicates that the chips in the set are input chips, which enable user input by converting text into chips.\n`mdc-chip-set--choice` | Optional. Indicates that the chips in the set are choice chips, which allow a single selection from a set of options.\n`mdc-chip-set--filter` | Optional. Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options.\n`mdc-chip` | Mandatory.\n`mdc-chip--selected` | Optional. Indicates that the chip is selected.\n`mdc-chip__text` | Mandatory. Indicates the text content of the chip.\n`mdc-chip__icon` | Optional. Indicates an icon in the chip.\n`mdc-chip__icon--leading` | Optional. Indicates a leading icon in the chip.\n`mdc-chip__icon--leading-hidden` | Optional. Hides the leading icon in a filter chip when the chip is selected.\n`mdc-chip__icon--trailing` | Optional. Indicates a trailing icon which removes the chip from the DOM. Only use with input chips.\n`mdc-chip__checkmark` | Optional. Indicates the checkmark in a filter chip.\n`mdc-chip__checkmark-svg` | Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG element in a filter chip.\n`mdc-chip__checkmark-path` | Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG path in a filter chip.\n\n> _NOTE_: Every element that has an `mdc-chip__icon` class must also have either the `mdc-chip__icon--leading` or `mdc-chip__icon--trailing` class.\n\n### Sass Mixins\n\nTo customize the colors of any part of the chip, use the following mixins.\n\nMixin | Description\n--- | ---\n`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`mdc-chip-corner-radius($radius)` | Customizes the corner radius for a chip\n`mdc-chip-fill-color-accessible($color)` | Customizes the background fill color for a chip, and updates the chip's ink, icon and ripple colors to meet accessibility standards\n`mdc-chip-fill-color($color)` | Customizes the background fill color for a chip\n`mdc-chip-ink-color($color)` | Customizes the text ink color for a chip, and updates the chip's ripple color to match\n`mdc-chip-selected-ink-color($color)` | Customizes text ink and ripple color of a chip in the _selected_ state\n`mdc-chip-outline($width, $style, $color)` | Customizes the outline properties for a chip\n`mdc-chip-outline-width($width)` | Customizes the outline width for a chip\n`mdc-chip-outline-style($style)` | Customizes the outline style for a chip\n`mdc-chip-outline-color($color)` | Customizes the outline color for a chip\n`mdc-chip-leading-icon-color($color, $opacity)` | Customizes the color of a leading icon in a chip, optionally customizes opacity\n`mdc-chip-trailing-icon-color($color, $opacity, $hover-opacity, $focus-opacity)` | Customizes the color of a trailing icon in a chip, optionally customizes regular/hover/focus opacities\n`mdc-chip-leading-icon-size($size)` | Customizes the size of a leading icon in a chip\n`mdc-chip-trailing-icon-size($size)` | Customizes the size of a trailing icon in a chip\n\n> _NOTE_: `mdc-chip-set-spacing` also sets the amount of space between a chip and the edge of the set it's contained in.\n\n### `MDCChip` and `MDCChipSet`\n\nThe MDC Chips module is comprised of two JavaScript classes:\n* `MDCChip` defines the behavior of a single chip\n* `MDCChipSet` defines the behavior of chips within a specific set. For example, chips in an input chip set behave differently from those in a filter chip set.\n\nTo use the `MDCChip` and `MDCChipSet` classes, [import](../../docs/importing-js.md) both classes from `@material/chips`.\n\n#### `MDCChip`\n\nMethod Signature | Description\n--- | ---\n`get foundation() => MDCChipFoundation` | Returns the foundation\n`isSelected() => boolean` | Proxies to the foundation's `isSelected` method\n`remove() => void` | Destroys the chip and removes the root element from the DOM\n\nProperty | Value Type | Description\n--- | --- | ---\n`ripple` | `MDCRipple` | The `MDCRipple` instance for the root element that `MDCChip` initializes\n\n#### `MDCChipSet`\n\nMethod Signature | Description\n--- | ---\n`addChip(text: string, leadingIcon: Element, trailingIcon: Element) => void` | Creates a new chip in the chip set with the given text, leading icon, and trailing icon\n\nProperty | Value Type | Description\n--- | --- | ---\n`chips` | Array<`MDCChip`> | An array of the `MDCChip` objects that represent chips in the set\n\n### Adapters: `MDCChipAdapter` and `MDCChipSetAdapter`\n\n#### `MDCChipAdapter`\n\nMethod 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 contains the given class\n`addClassToLeadingIcon(className: string) => void` | Adds a class to the leading icon element\n`removeClassFromLeadingIcon(className: string) => void` | Removes a class from the leading icon element\n`eventTargetHasClass(target: EventTarget, className: string) => boolean` | Returns true if target has className, false otherwise\n`registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element\n`deregisterEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element\n`registerTrailingIconInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the trailing icon element\n`deregisterTrailingIconInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the trailing icon element\n`notifyInteraction() => void` | Emits a custom event `MDCChip:interaction` denoting the chip has been interacted with\n`notifyTrailingIconInteraction() => void` | Emits a custom event `MDCChip:trailingIconInteraction` denoting the chip's trailing icon has been interacted with\n`notifyRemoval() => void` | Emits a custom event `MDCChip:removal` denoting the chip will be removed\n`getComputedStyleValue(propertyName: string) => string` | Returns the computed property value of the given style property on the root element\n`setStyleProperty(propertyName: string, value: string) => void` | Sets the property value of the given style property on the root element\n\n> _NOTE_: The custom events emitted by `notifyInteraction` and `notifyTrailingIconInteraction` must pass along the target chip in its event `detail`, as well as bubble to the parent `mdc-chip-set` element.\n\n#### `MDCChipSetAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns whether the chip set element has the given class\n`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event handler on the root element for a given event\n`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event handler on the root element for a given event\n`appendChip(text: string, leadingIcon: Element, trailingIcon: Element) => Element` | Appends and returns a chip element with the given text, leading icon, and trailing icon\n`removeChip(chip: MDCChip) => void` | Removes the chip object from the chip set\n\n### Foundations: `MDCChipFoundation` and `MDCChipSetFoundation`\n\n#### `MDCChipFoundation`\n\nMethod Signature | Description\n--- | ---\n`isSelected() => boolean` | Returns true if the chip is selected\n`setSelected(selected: boolean) => void` | Sets the chip's selected state\n\n#### `MDCChipSetFoundation`\n\nMethod Signature | Description\n--- | ---\n`addChip(text: string, leadingIcon: Element, trailingIcon: Element) => Element` | Returns a new chip element with the given text, leading icon, and trailing icon, added to the root chip set element\n`select(chipFoundation: MDCChipFoundation) => void` | Selects the given chip\n`deselect(chipFoundation: MDCChipFoundation) => void` | Deselects the given chip\n","license":"Apache 2.0","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","chips"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the Web chips 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":"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.7.0","dependencies":{"@material/base":"^0.35.0","@material/ripple":"^0.35.0","@material/checkbox":"^0.35.0","@material/animation":"^0.34.0","@material/typography":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_0.35.0_1524523206752_0.6223892331739296","host":"s3://npm-registry-packages"},"_id":"@material/chips@0.35.0","version":"0.35.0"}