{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f29faad6eaadda2fcf0e0a0c754f3bd9c9d7aef","tarball":"https://registry.npmjs.org/@material/chips/-/chips-6.0.0-canary.fe79de07d.0.tgz","fileCount":59,"integrity":"sha512-n6rA8fVcnToINZ2IvxXauQSjINjMBXwp/RHO0KW5Hkee4L9MS3e3czhOAR1ODXdtAOCGaIdVvP11IdTZzT9Ctw==","signatures":[{"sig":"MEUCIGBhE6h1sIoOP0H6DGUSbZnVZK+NVnt4xpmMXF1hUDAjAiEAsTY1OEKKf3f4yj161GmaGGkOQu5IaBtv1HDMKc13fDI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":727233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdqjCRA9TVsSAnZWagAAl0AP/RUem4p7LetT9gUKjaDM\niiKF1CKaerk7B7qBHmPh4+cqZ5FH36HPv+VFWDEWR69UI6/kyAIgusw4+BG5\nz6TTHRtQZnfQ107lbSNzXztdKfUlH6uR0Rc/gYA4G5HXV1hzM+Pz5hkl1+61\nl6Dai5iHc3iAQK38RTaMWKXrKN6Uz1kPGXga0ALSbRplUy6qjaICdRKEEXrl\n1bpynZRi/oQ5RZp8Mk5n2Loj7t1DIhyxqUlw7To9cs5Otq+C0UqZeA7Sg6yY\nrMQHQW5P2QOFiXK1qtOuJ1ftDE7QffmZHwnv6BWlnbk97t4Zrht2EZxiySE1\nFJS+M6KPYkQqX+PdtlBzvf6dO+blPvHW3H/1U6bS6EXqmh3hv0aYhl65fakQ\nabaDPErntFTMGQ1p5esiztklvSgbmppo7nNxDB1sakvi6P/gsI+p16cA9DiA\nv4GInW3jRESx3hCaTciCBADBVqhWoiIT+Xs4CX8roP8iRepm0aKJwn0xGGNQ\n7wuApu80PVYFhwci9lUWVFMI+HVCHxyhhGjdrdt7kfGdPTmED9zv06tmO5Uf\nI21gYtzX3I0qqemy9/DnTbIWn5zZkch0qebG65gHwD5wQYlegIVQ76YjsK/f\nqbYkAUiPxXZ+pI2zzTrt1M+WsCW2rXqpkQiEZd4JW3cj4fg7mYLcDTZNW4h5\nPUTi\r\n=dhrr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.chips.js","name":"@material/chips","types":"dist/mdc.chips.d.ts","module":"index.js","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.github.io/material-components-web-catalog/#/component/chips\">\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/go/design-chips\">Material Design guidelines: Chips</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/chips\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/chips\n```\n\n## Basic Usage\n\n### HTML Structure\n\n>**Note**: Due to IE11 and Edge's lack of support for the `:focus-within` selector, keyboard navigation of the chip set will not be visually obvious.\n\n```html\n<div class=\"mdc-chip-set\" role=\"grid\">\n  <div class=\"mdc-chip\" role=\"row\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <span role=\"gridcell\">\n      <span role=\"button\" tabindex=\"0\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Chip One</span>\n      </span>\n    </span>\n  </div>\n  <div class=\"mdc-chip\" role=\"row\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <span role=\"gridcell\">\n      <span role=\"button\" tabindex=\"-1\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Chip Two</span>\n      </span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Styles\n\n```scss\n@use \"@material/chips/mdc-chips\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCChipSet} from '@material/chips';\nconst chipSetEl = document.querySelector('.mdc-chip-set');\nconst chipSet = new MDCChipSet(chipSetEl);\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Leading and Trailing Icons\n\nYou can optionally add a leading icon (i.e. thumbnail) and/or a trailing \"remove\" 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`.\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n<head>\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\n</head>\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n#### Leading icon\n\n```html\n<div class=\"mdc-chip\" role=\"row\">\n  <div class=\"mdc-chip__ripple\"></div>\n  <i class=\"material-icons mdc-chip__icon mdc-chip__icon--leading\">event</i>\n  <span role=\"gridcell\">\n    <span role=\"button\" tabindex=\"0\" class=\"mdc-chip__primary-action\">\n      <span class=\"mdc-chip__text\">Add to calendar</span>\n    </span>\n  </span>\n</div>\n```\n\n#### Trailing icon\n\nA trailing icon comes with the functionality to remove the chip from the set. If you're adding a trailing icon, also set `tabindex=\"0\"` and `role=\"button\"` to make it accessible by keyboard and screenreader. Trailing icons should only be added to [input chips](#input-chips).\n\n```html\n<div class=\"mdc-chip\" role=\"row\">\n  <div class=\"mdc-chip__ripple\"></div>\n  <span role=\"gridcell\">\n    <span role=\"button\" tabindex=\"0\" class=\"mdc-chip__primary-action\">\n      <span class=\"mdc-chip__text\">Jane Smith</span>\n    </span>\n  </span>\n  <span role=\"gridcell\">\n    <i class=\"material-icons mdc-chip__icon mdc-chip__icon--trailing\" tabindex=\"-1\" role=\"button\">cancel</i>\n  </span>\n</div>\n```\n\n### Choice Chips\n\nChoice chips are a variant of chips which allow single selection from a set of options. To define a set of chips as choice chips, add the class `mdc-chip-set--choice` to the chip set element.\n\n```html\n<div class=\"mdc-chip-set mdc-chip-set--choice\" role=\"grid\">\n  ...\n</div>\n```\n\n### Filter Chips\n\nFilter chips are a variant of chips which allow multiple selection from a set of options. To define a set of chips as filter chips, add the class `mdc-chip-set--filter` to the chip set element. 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-set mdc-chip-set--filter\" role=\"grid\">\n  <div class=\"mdc-chip\" role=\"row\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <span 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    </span>\n    <span role=\"gridcell\">\n      <span role=\"checkbox\" tabindex=\"0\" aria-checked=\"false\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Filterable content</span>\n      </span>\n    </span>\n  </div>\n  ...\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-set mdc-chip-set--filter\" role=\"grid\">\n  <div class=\"mdc-chip\" role=\"row\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <i class=\"material-icons mdc-chip__icon mdc-chip__icon--leading\">face</i>\n    <span 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    </span>\n    <span role=\"gridcell\">\n      <span role=\"checkbox\" tabindex=\"0\" aria-checked=\"false\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Filterable content</span>\n      </span>\n    </span>\n  </div>\n  ...\n</div>\n```\n\n### Input Chips\n\nInput chips are a variant of chips which enable user input by converting text into chips. To define a set of chips as input chips, add the class `mdc-chip-set--input` to the chip set element.\n\n```html\n<div class=\"mdc-chip-set mdc-chip-set--input\" role=\"grid\">\n  ...\n</div>\n```\n\n#### Adding Chips to the DOM\n\nThe MDC Chips package does not handle the process of converting text into chips, in order to remain framework-agnostic. The `MDCChipSet` component exposes an `addChip` method, which accepts an element which is expected to already be inserted within the Chip Set element after any existing chips. The `MDCChipSet` component will then handle creating and tracking a `MDCChip` component instance.\n\nFor example:\n\n```js\ninput.addEventListener('keydown', function(event) {\n  if (event.key === 'Enter' || event.keyCode === 13) {\n    const chipEl = document.createElement('div');\n    // ... perform operations to properly populate/decorate chip element ...\n    chipSetEl.appendChild(chipEl);\n    chipSet.addChip(chipEl);\n  }\n});\n```\n\n> _NOTE_: `MDCChipSet` will generate a unique ID to apply to each added chip's element if it does not already have an ID\n> when it is passed to `addChip`. This is used to distinguish chips during user interactions.\n\n#### Removing Chips from the DOM\n\nBy default, input chips are removed in response to clicking the trailing remove icon in the chip. Removal can also be triggered by calling `MDCChip`'s `beginExit()` method.\n\nIndividual `MDCChip` instances will emit a `MDCChip:removal` event once the exit transition ends. `MDCChipSet` will handle destroying the `MDCChip` instance in response to `MDCChip:removal`, but it must be removed from the DOM manually. You can listen for `MDCChip:removal` from the parent Chip Set or any ancestor, since the event bubbles:\n\n```js\nchipSet.listen('MDCChip:removal', function(event) {\n  chipSetEl.removeChild(event.detail.root);\n});\n```\n\n### Pre-selected\n\nTo display a pre-selected filter or choice chip, add the class `mdc-chip--selected` to the root chip element.\n\n```html\n<div class=\"mdc-chip-set mdc-chip-set--choice\" role=\"grid\">\n  <div class=\"mdc-chip mdc-chip--selected\" role=\"row\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <span role=\"gridcell\">\n      <span role=\"radio\" tabindex=\"0\" aria-checked=\"true\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Add to calendar</span>\n      </span>\n    </span>\n  </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-set mdc-chip-set--filter\" role=\"grid\">\n  <div class=\"mdc-chip mdc-chip--selected\" role=\"row\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <i class=\"material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden\">face</i>\n    <span 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    </span>\n    <span role=\"gridcell\">\n      <span role=\"checkbox\" tabindex=\"0\" aria-checked=\"true\" class=\"mdc-chip__primary-action\">\n        <span class=\"mdc-chip__text\">Filterable content</span>\n      </span>\n    </span>\n  </div>\n</div>\n```\n\n## Additional Information\n\n### Accessibility\n\nMaterial Design spec advises that touch targets should be at least 48 x 48 px.\nTo meet this requirement, add the following to your chip:\n\n```html\n<div class=\"mdc-touch-target-wrapper\">\n  <div class=\"mdc-chip mdc-chip--touch\">\n    <div class=\"mdc-chip__ripple\"></div>\n    <span role=\"gridcell\">\n      <span role=\"button\" tabindex=\"0\" class=\"mdc-chip__primary-action\">\n        <div class=\"mdc-chip__touch\"></div>\n        <span class=\"mdc-chip__text\">Chip One</span>\n      </span>\n    </span>\n  </div>\n</div>\n```\n\nNote that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).\n\n## Style Customization\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__ripple` | Mandatory. Indicates the element which shows the ripple styling.\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. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.\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`mdc-chip__action--primary` | Mandatory. Placed on the `mdc-chip__text` element.\n`mdc-chip__action--trailing` | Optinoal. Placed on the `mdc-chip__icon--trailing` when it should be accessible via keyboard navigation.\n`mdc-chip--deletable` | Optional. Indicates that the chip should be removable by the delete or backspace key.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`set-spacing($gap-size)` | Customizes the amount of space between each chip in the set\n`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to chip with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.\n`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`fill-color($color)` | Customizes the background fill color for a chip\n`ink-color($color)` | Customizes the text ink color for a chip, and updates the chip's ripple color to match\n`selected-ink-color($color)` | Customizes text ink and ripple color of a chip in the _selected_ state\n`outline($width, $style, $color)` | Customizes the outline properties for a chip\n`outline-width($width, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `horizontal-padding` is also included with a custom value\n`outline-style($style)` | Customizes the outline style for a chip\n`outline-color($color)` | Customizes the outline color for a chip\n`height($height)` | Customizes the height for a chip\n`horizontal-padding($padding)` | Customizes the horizontal padding for a chip\n`leading-icon-color($color, $opacity)` | Customizes the color of a leading icon in a chip, optionally customizes opacity\n`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`leading-icon-size($size)` | Customizes the size of a leading icon in a chip\n`trailing-icon-size($size)` | Customizes the size of a trailing icon in a chip\n`leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip\n`trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip\n`elevation-transition()` | Adds a MDC elevation transition to the chip. This should be used instead of setting transition with `mdc-elevation-transition-value()` directly when a box shadow transition is desired for a chip\n`density($density-scale)` | Sets density scale for chip. Supported density scales  are `-2`, `-1` and `0` (default).\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` Properties and Methods\n\nThe MDC Chips package is composed 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`beginExit() => void` | Proxies to the foundation's `beginExit` method\n`focusPrimaryAction() => void` | Proxies to the foundation's `focusPrimaryAction` method\n`focusTrailingAction() => void` | Proxies to the foundation's `focusTrailingAction` method\n`removeFocus() => void` | Proxies to the foundation's `removeFocus` method\n`setSelectedFromChipSet(selected: boolean) => void` | Proxies to the foundation's `setSelectedFromChipset` method (only called from the chip set)\n\nProperty | Value Type | Description\n--- | --- | ---\n`id` | `string` (read-only) | Unique identifier on the chip\\*\n`selected` | `boolean` | Proxies to the foundation's `isSelected`/`setSelected` methods\n`shouldRemoveOnTrailingIconClick` | `boolean` | Proxies to the foundation's `getShouldRemoveOnTrailingIconClick`/`setShouldRemoveOnTrailingIconClick` methods\\*\\*\n`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCChip` initializes\n\n> \\*_NOTE_: This will be the same as the `id` attribute on the root element. If an `id` is not provided, a unique one will be generated by `MDCChipSet.addChip()`.\n\n> \\*\\*_NOTE_: If `shouldRemoveOnTrailingIconClick` is set to false, you must manually call `beginExit()` on the chip to remove it.\n\n##### Events\n\nEvent Name | `event.detail` | Description\n--- | --- | ---\n`MDCChip:interaction` | `{chipId: string}` | Indicates the chip was interacted with (via click/tap or Enter key)\n`MDCChip:selection` | `{chipId: string, selected: boolean}` | Indicates the chip's selection state has changed (for choice/filter chips)\n`MDCChip:removal` | `{chipId: string, removedAnnouncement: string|null}` | Indicates the chip is ready to be removed from the DOM\n`MDCChip:trailingIconInteraction` | `{chipId: string}` | Indicates the chip's trailing icon was interacted with (via click/tap or Enter key)\n`MDCChip:navigation` | `{chipId: string, key: string, source: FocusSource}` | Indicates a navigation event has occurred on a chip\n\n> _NOTE_: All of `MDCChip`'s emitted events bubble up through the DOM.\n\n#### `MDCChipSet`\n\nMethod Signature | Description\n--- | ---\n`addChip(chipEl: Element) => void` | Adds a new `MDCChip` instance to the chip set based on the given `mdc-chip` element\n\nProperty | Value Type | Description\n--- | --- | ---\n`chips` | `ReadonlyArray<MDCChip>` | An array of the `MDCChip` objects that represent chips in the set\n`selectedChipIds` | `ReadonlyArray<string>` | An array of the IDs of all selected chips\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create Chips 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### Adapters: `MDCChipAdapter` and `MDCChipSetAdapter`\n\nSee [`chip/component.ts`](chip/component.ts) and [`chip-set/component.ts`](chip-set/component.ts) for vanilla DOM implementations of these adapter APIs for reference.\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`notifyInteraction() => void` | Notifies the Chip Set that the chip has been interacted with\\*\n`notifySelection(selected: boolean, chipSetShouldIgnore: boolean) => void` | Notifies the Chip Set that the chip has been selected or deselected\\*\\*. When `chipSetShouldIgnore` is `true`, the chip set does not process the event.\n`notifyTrailingIconInteraction() => void` | Notifies the Chip Set that the chip's trailing icon has been interacted with\\*\n`notifyRemoval() => void` | Notifies the Chip Set that 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`hasLeadingIcon() => boolean` | Returns whether the chip has a leading icon\n`getRootBoundingClientRect() => ClientRect` | Returns the bounding client rect of the root element\n`getCheckmarkBoundingClientRect() => ClientRect \\| null` | Returns the bounding client rect of the checkmark element or null if it doesn't exist\n`notifyNavigation(key: string, source: EventSource) => void` | Notifies the Chip Set that a navigation event has occurred\n`setPrimaryActionAttr(attr: string, value: string) => void` | Sets an attribute on the primary action element to the given value\n`focusPrimaryAction() => void` | Gives focus to the primary action element\n`hasTrailingAction() => boolean` | Returns `true` if the chip has a trailing action element\n`setTrailingActionAttr(attr: string, value: string) => void` | Sets an attribute on the trailing action element to the given value, if the element exists\n`focusTrailingAction() => void` | Gives focus to the trailing action element if present\n`getAttribute(attr: string) => string|null` | Returns the string value of the attribute if it exists, otherwise `null`\n\n\n> \\*_NOTE_: `notifyInteraction` and `notifyTrailingIconInteraction` must pass along the target chip's ID, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling).\n\n> \\*\\*_NOTE_: `notifySelection` must pass along the target chip's ID and selected state, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling).\n\n> \\*\\*\\*_NOTE_: `notifyRemoval` must pass along the target chip's ID and its root element, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling).\n\n#### `MDCChipSetAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Returns whether the chip set element has the given class\n`removeChipAtIndex(index: number) => void` | Removes the chip with the given `index` from the chip set\n`selectChipAtIndex(index: string, selected: boolean, shouldNotifyClients: boolean) => void` | Calls `MDCChip#setSelectedFromChipSet(selected)` on the chip at the given `index`. Will emit a selection event if called with `shouldNotifyClients` set to `true`. The emitted selection event will be ignored by the `MDCChipSetFoundation`.\n`getIndexOfChipById(id: string) => number` | Returns the index of the chip with the matching `id` or -1\n`focusChipPrimaryActionAtIndex(index: number) => void` | Calls `MDCChip#focusPrimaryAction()` on the chip at the given `index`\n`focusChipTrailingActionAtIndex(index: number) => void` | Calls `MDCChip#focusTrailingAction()` on the chip at the given `index`\n`isRTL() => boolean` | Returns `true` if the text direction is RTL\n`getChipListCount() => number` | Returns the number of chips inside the chip set\n`removeFocusFromChipAtIndex(index: number) => void` | Calls `MDCChip#removeFocus()` on the chip at the given `index`\n`announceMessage(message: string) => void` | Announces the message via [an `aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\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`setSelectedFromChipSet(selected: boolean, shouldNotifyClients: boolean) => void` | Sets the chip's selected state (called from the chip set) to the `selected` param. Will emit a selection event if called with `shouldNotifyClients` set to `true`. The emitted selection event will be ignored by the `MDCChipSetFoundation`.\n`getShouldRemoveOnTrailingIconClick() => boolean` | Returns whether a trailing icon click should trigger exit/removal of the chip\n`setShouldRemoveOnTrailingIconClick(shouldRemove: boolean) => void` | Sets whether a trailing icon click should trigger exit/removal of the chip\n`getDimensions() => ClientRect` | Returns the dimensions of the chip. This is used for applying ripple to the chip.\n`beginExit() => void` | Begins the exit animation which leads to removal of the chip\n`handleInteraction(evt: Event) => void` | Handles an interaction event on the root element\n`handleTransitionEnd(evt: Event) => void` | Handles a transition end event on the root element\n`handleTrailingIconInteraction(evt: Event) => void` | Handles an interaction event on the trailing icon element\n`handleKeydown(evt: Event) => void` | Handles a keydown event on the root element\n`removeFocus() => void` | Removes focusability from the chip\n\n#### `MDCChipFoundation` Event Handlers\n\nWhen wrapping the Chip foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`click`, `keydown` | `.mdc-chip` (root) | `handleInteraction()`\n`click`, `keydown` | `.mdc-chip__icon--trailing` (if present) | `handleTrailingIconInteraction()`\n`transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`\n`keydown` | `.mdc-chip` (root) | `handleKeydown()`\n\n#### `MDCChipSetFoundation`\n\nMethod Signature | Description\n--- | ---\n`getSelectedChipIds() => ReadonlyArray<string>` | Returns an array of the IDs of all selected chips\n`select(chipId: string) => void` | Selects the chip with the given id\n`handleChipInteraction(detail: MDCChipInteractionEventDetail) => void` | Handles a custom `MDCChip:interaction` event on the root element\n`handleChipSelection(detail: MDCChipSelectionEventDetail) => void` | Handles a custom `MDCChip:selection` event on the root element. When `chipSetShouldIgnore` is true, the chip set does not process the event.\n`handleChipRemoval(detail: MDCChipRemovalEventDetail) => void` | Handles a custom `MDCChip:removal` event on the root element\n`handleChipNavigation(detail: MDCChipNavigationEventDetail) => void` | Handles a custom `MDCChip:navigation` event on the root element\n\n#### `MDCChipSetFoundation` Event Handlers\n\nWhen wrapping the Chip Set foundation, the following events must be bound to the indicated foundation methods:\n\nEvents | Element Selector | Foundation Handler\n--- | --- | ---\n`MDCChip:interaction` | `.mdc-chip-set` (root) | `handleChipInteraction`\n`MDCChip:selection` | `.mdc-chip-set` (root) | `handleChipSelection`\n`MDCChip:removal` | `.mdc-chip-set` (root) | `handleChipRemoval`\n`MDCChip:navigation` | `.mdc-chip-set` (root) | `handleChipNavigation`\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.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","directory":"packages/mdc-chips"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the Web chips component","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.fe79de07d.0","@material/rtl":"6.0.0-canary.fe79de07d.0","@material/base":"6.0.0-canary.fe79de07d.0","@material/shape":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/ripple":"6.0.0-canary.fe79de07d.0","@material/density":"6.0.0-canary.fe79de07d.0","@material/checkbox":"6.0.0-canary.fe79de07d.0","@material/animation":"6.0.0-canary.fe79de07d.0","@material/elevation":"6.0.0-canary.fe79de07d.0","@material/typography":"6.0.0-canary.fe79de07d.0","@material/touch-target":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/chips_6.0.0-canary.fe79de07d.0_1581636259556_0.1793361255913304","host":"s3://npm-registry-packages"},"_id":"@material/chips@6.0.0-canary.fe79de07d.0","version":"6.0.0-canary.fe79de07d.0"}